<div class="login-form-body">
    <div class="from-c">
        <img src="../../../../assets/img/login/lefttop.png" class="border-img border-img-lt" />
        <img src="../../../../assets/img/login/leftbottom.png" class="border-img border-img-lb" />
        <img src="../../../../assets/img/login/righttop.png" class="border-img border-img-rt" />
        <img src="../../../../assets/img/login/rightbottom.png" class="border-img border-img-rb" />
        <div class="title-img">
            <img src="../../../../assets/img/logo.png" alt="" />
        </div>
        <div class="c-title">
            <p><img src="../../../../assets/img/login/title.png" /></p>
            <p>V1.0.0</p>
        </div>
        <form nz-form class="form" [formGroup]="loginForm">
            <nz-form-item>
                <nz-form-control [nzSpan]="24">
                    <nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
                        <input class="i-input" nz-input formControlName="loginId" name="loginId" type="text" id="loginId" placeholder="请输入账号" />
                    </nz-input-group>
                    <ng-template #prefixTemplate><img src="../../../../assets/img/login/icon-user.png" /></ng-template>
                    <nz-form-explain *ngIf="loginForm.get('loginId').dirty && loginForm.get('loginId').errors">请输入账号!</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control [nzSpan]="24">
                    <nz-input-group *ngIf="!isShowPSD" [nzSuffix]="eyeInvisiblePreSuffix" [nzPrefix]="prefixLock">
                        <input class="i-input" nz-input formControlName="loginPw" name="loginPw" type="password" id="loginPw" placeholder="请输入密码" />
                    </nz-input-group>
                    <nz-input-group *ngIf="isShowPSD" [nzSuffix]="eyePreSuffix" [nzPrefix]="prefixLock">
                        <input class="i-input" nz-input formControlName="loginPw" name="loginPw" type="text" id="loginPw" placeholder="请输入密码" />
                    </nz-input-group>
                    <ng-template #prefixLock><img src="../../../../assets/img/login/icon-pwd.png" /></ng-template>
                    <ng-template #eyePreSuffix>
                        <i nz-icon *ngIf="isShowPSD" style="color: #fff;cursor: pointer;" nzType="eye-invisible" nzTheme="fill" (click)="onShowPSW(loginForm.value)"></i>
                    </ng-template>
                    <ng-template #eyeInvisiblePreSuffix>
                        <i nz-icon *ngIf="!isShowPSD" style="color: #fff;cursor: pointer;" nzType="eye" nzTheme="fill" (click)="onHidePSW(loginForm.value)"></i>
                    </ng-template>
                    <nz-form-explain *ngIf="loginForm.get('loginPw').dirty && loginForm.get('loginPw').errors">请输入密码!</nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-control [nzSpan]="24">
                    <nz-input-group [nzPrefix]="prevalidCode" [nzSuffix]="validCodeImg">
                        <input class="i-input" nz-input formControlName="imageCode" name="imageCode" type="text" id="imageCode" placeholder="请输入验证码">
                    </nz-input-group>
                    <ng-template #prevalidCode><img src="../../../../assets/img/login/icon-code.png" /></ng-template>
                    <ng-template #validCodeImg ><img *ngIf="validateCodeImg" [src]="validateCodeImg" (click)="getvalidateCode()" /></ng-template>
                    <nz-form-explain *ngIf="loginForm.get('loginPw').dirty && loginForm.get('loginPw').errors">请输入图形验证码!</nz-form-explain>
                    <a class="login-form-forgot" routerLink="/pages/password/reset"> 忘记密码？ </a>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button [nzType]="'primary'" nzShape="round" (click)="submit()" [disabled]="loginForm.invalid" class="login-btn">登陆</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
</div>
